import React from 'react'
import {connect} from 'dva'
import moment from 'moment'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import RightContacts from '../../../utils/RightConstants';
import RightBox from "../../../components/commons/RightBox";
const InputGroup = Input.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const Dragger = Upload.Dragger;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const dateFormat = 'YYYY-MM-DD';
const doApproval = "doApproval";
const view = "view";

const Approval = ({routes, params, children, location, dispatch, approval}) => {
    const {page, search, list, editModel} = approval;

    let onEdit = (record, type) => {
        let step = "";
        let title = "";
        if (type == doApproval) {
            step = 1;
            title = '审核';
        }else if (type == view) {
            step = 2;
            title = '查看审核记录';
        }


        dispatch({
            type: 'approval/getStatementById',
            payload: {
                step: step,
                id: record.id,
                title : title,
                type : type,
            }
        })
    }

    const columns = [ {
        title: '客户代码',
        dataIndex: 'customerno',
        key: 'customerno',
        width: '120px'
    }, {
        title: '客户名称',
        dataIndex: 'companyname',
        key: 'companyname',
        width: '200px'
    }, {
        title: '结算单号',
        dataIndex: 'stateno',
        key: 'stateno',
        width: '200px'
    }, {
        title: '实际支付(CNY)',
        dataIndex: 'transferamount',
        key: 'transferamount',
        width: '150px'
    },{
        title: '收款人',
        dataIndex: 'accname',
        key: 'accname',
        width: '150px'
    },{
        title: '银行账号',
        dataIndex: 'accno',
        key: 'accno',
        width: '100px'
    },{
        title: '申请人',
        dataIndex: 'creator',
        key: 'creator',
        width: '100px'
    },{
        title: '申请时间',
        dataIndex: 'createtime',
        key: 'createtime',
        width: '100px'
    }, {
        title: '操作',
        width: '150px',
        render(record) {
            return (
                <span>
                    {record.status == 2 ?
                        <span> <RightBox resource={RightContacts.CAPITAL.CAPITAL_PAY_APPROVAL}><a href="#" onClick={() => {onEdit(record, doApproval);}}>审核</a></RightBox>
                            {/*<span className="ant-divider"/>*/}
                        </span>
                        : ""}

                    {record.status != 2 ?
                        <span> <a href="#" onClick={() => {onEdit(record, view);}}>查看审核记录</a>
                            {/*<span className="ant-divider"/>*/}
                        </span>
                        : ""}

                </span>
            );
        }
    }];

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18}
    };



    const SearchForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const handleSearch = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }

                dispatch({
                    type: 'approval/setSearch', payload: {

                        search: {
                            time: values.time,
                            cstId: values.cstId,
                            stateno: values.stateno,
                            status: values.status,
                            beginTime: '',
                            endTime: '',
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            creator: values.creator,
                        }
                    }
                });
                let newPage = page;
                newPage.page = 1;
                dispatch({
                    type: 'approval/setPage', payload: {
                        page: newPage
                    }
                });
                dispatch({type: 'approval/getStatementsList'});
            });
        }

        return (
            <div>

                <div>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'客户代码'}>
                                {getFieldDecorator('cstId', {initialValue: search.cstId})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={7}>
                            <FormItem  {...formItemLayout} label={'转账金额'}>
                                {getFieldDecorator('minamount', {initialValue: search.minamount})(
                                    <Input style={{width: 230}} placeholder="最小金额" />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={2}>
                            <FormItem {...formItemLayout} label={'至'} >
                                {getFieldDecorator('maxamount', {initialValue: search.maxamount})(
                                    <Input style={{width: 230}}  placeholder="最大金额" />
                                )}
                            </FormItem>
                        </Col>

                    </Row>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'结算单号'}>
                                {getFieldDecorator('stateno', {initialValue: search.stateno})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'申请时间'}>
                                {getFieldDecorator('time', {initialValue:
                                    [ search.beginTime == '' ? '' : moment(search.beginTime, dateFormat), search.endTime == '' ? '' :moment(search.endTime, dateFormat)]})(
                                    <RangePicker
                                        style={{width: 230}}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder={['开始时间', '结束时间']}
                                    />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>

                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'申请人'}>
                                {getFieldDecorator('creator', {initialValue: search.creator})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8} style={{paddingLeft: 10}}>
                            <Button type="primary" icon="search" style={{marginLeft: 25}} onClick={handleSearch} >查询</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'状态'}>
                                {getFieldDecorator('status', {
                                    initialValue: search.status == '' ? '2' : search.status
                                })(
                                    <RadioGroup style={{width: 800}} >
                                        <Radio value='2'>待审核</Radio>
                                        <Radio value='3'>审核失败</Radio>
                                        <Radio value='4'>待付款</Radio>
                                        <Radio value='5'>已付款</Radio>
                                        <Radio value='6'>付款失败</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    });

    return (
        <div>
            <EditApproval visible={editModel.showStatus} model={editModel} title={editModel.title}
                          confirmLoading={editModel.confirmLoading} dispatch={dispatch}/>
            <SearchForm/>

            <Table dataSource={list} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                showTotal: total => `共 ${total} 条数据`,
                pageSize: page.size,
                total: page.totalRow,
                showSizeChanger: true,
                onShowSizeChange: (current, size) => {
                    let newPage = page;
                    newPage.size = size;
                    newPage.page = 1;
                    dispatch({
                        type: 'invoice/setPage', payload: {
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = page;
                    newPage.page = pageNumber;
                    dispatch({
                        type: 'invoice/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'invoice/getInvoicesList'});
                }
            }}/>
        </div>

    );
}


const EditApproval = ({visible, title, dispatch, confirmLoading, model}) => {

    return approval({visible, title, dispatch, confirmLoading, model});
}


/**
 * 结算单审核
 * @returns {XML}
 */
const approval = ({visible, title, dispatch, confirmLoading, model}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        },
    };

    let xform = model.form;

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;
        return (

            <Modal visible={visible} title={title} width={model.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'approval/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {

                    if(xform.type == doApproval){
                        validateFields((errors, values) => {
                            if (errors) {
                                return
                            }

                            dispatch({
                                type: 'approval/doApproval',
                                payload: {
                                    id: xform.id,
                                    approvalresult: values.approvalresult,
                                    approvalmemo: values.approvalmemo,
                                }
                            });

                        });
                    }else{
                        dispatch({
                            type: 'approval/setEditModel',
                            payload: {
                                showStatus: false
                            }
                        });
                    }

                }
            }>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="结算日期"
                            hasFeedback
                        >

                            <span>{xform.createtime}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="结算单号"
                            hasFeedback
                        >

                            <span>{xform.stateno}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="实际支付"
                            hasFeedback
                        >

                            <span>{xform.transferamount}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="本次结余"
                            hasFeedback
                        >

                            <span>{xform.unpayamount}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="收款人"
                            hasFeedback
                        >

                            <span>{xform.payman}</span>

                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="银行名称"
                            hasFeedback
                        >

                            <span>{xform.accopenbank}</span>

                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="银行账号"
                            hasFeedback
                        >

                            <span>{xform.accno}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="代理费收费标准"
                            hasFeedback
                        >

                            <span>未知</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >

                            <span>{xform.memo}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="转账确认函"
                            hasFeedback
                        >

                            <a href={xform.url}>预览</a>

                        </FormItem>
                    </Col>
                </Row>
                <Form>

                    {xform.type == doApproval ?
                        <FormItem
                            {...formItemLayout}
                            label="请选择审核状态"
                            hasFeedback
                        >
                            {getFieldDecorator('approvalresult', {
                                rules: [{
                                    required: true, message: '请选择审核状态！',
                                }],
                                initialValue: ''
                            })(
                                <Select>
                                    <Option value="2">审核通过</Option>
                                    <Option value="3">审核失败</Option>
                                </Select>
                            )}
                        </FormItem>
                        :""
                    }

                    {xform.type == doApproval ?
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            {getFieldDecorator('approvalmemo', {
                                rules: [{
                                    required: false, message: '请输入备注！',
                                }],
                                initialValue: xform.memo
                            })(
                                <Input disabled={xform.type == 'view' ? true : false}/>
                            )}
                        </FormItem>
                        :""
                    }


                    {xform.type == view ?
                        <FormItem
                            {...formItemLayout}
                            label="审核状态"
                            hasFeedback
                        >
                            <div>
                                {xform.status == 2 ? "待审核" :""}
                                {xform.status == 3 ? "审核失败" :""}
                                {(xform.status == 4 || xform.status == 5 || xform.status == 6) ? "审核成功" :""}

                            </div>
                        </FormItem>
                        : ""
                    }

                    {xform.type == view ?
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            <span>{xform.memo}</span>
                        </FormItem>
                        : ""
                    }

                </Form>
            </Modal>
        );
    });


    return (
        <div>
            <WrappedForm/>
        </div>
    );
};




const nullEmpty = () => {
    return (
        <span></span>
    );
}

export default connect(({approval}) => ({approval}))(Approval)